<template>

    <div>
        <el-menu
                :default-active="activeIndex2"
                :class="(this.$route.path.includes('entrance')||this.$route.path.length==5)?'el-menu-demo':''"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                style="display: flex;justify-content: flex-end">

            <el-menu-item index="1" >
                <router-link :to="{name:'home'}">首页</router-link>
            </el-menu-item>
            <el-submenu index="2">
                <template slot="title" >
                    <el-avatar :src=this.$store.state.tx></el-avatar>&nbsp;我的工作台
                </template>
                <el-menu-item index="2-3"  v-if="this.$store.state.admin"  @click="tz('publish_article')">发布文章</el-menu-item>
                <el-menu-item index="2-1" @click="tz('apply')" >我的报名表</el-menu-item>
                <el-menu-item index="2-2"  v-if="this.$store.state.admin"  @click="tz('apply_list')">设计大赛报名单</el-menu-item>
                <el-menu-item index="2-4" v-on:click="logout">退出</el-menu-item>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4"><a href="#" target="_self">空缺</a></el-menu-item>
        </el-menu>
        <!--<div data-v-29e8c3c6="" class="seo collapse">-->
            <!--<nav data-v-29e8c3c6="">-->
                <!--<ul data-v-29e8c3c6="" class="r">-->
                    <!--<li data-v-29e8c3c6=""><a data-v-29e8c3c6="" href="javascript:;">我的青春恋爱物语果然有问题</a></li>-->
                    <!--<li data-v-29e8c3c6=""><a data-v-29e8c3c6="" href="javascript:;">变态王子与不笑猫</a></li>-->
                    <!--<li data-v-29e8c3c6=""><a data-v-29e8c3c6="" href="javascript:;">企鹅公路</a></li>-->
                    <!--<li data-v-29e8c3c6=""><a data-v-29e8c3c6="" href="javascript:;">文学少女</a></li>-->
                <!--</ul>-->
            <!--</nav>-->
        <!--</div>-->
    </div>
</template>

<script>

    export default {

        data() {
            return {
                activeIndex2: '1',
            }
        },
        async created() {
            window.speechSynthesis.cancel(this.$store.state.Utter)
            if (localStorage.getItem('Authorization')) {
                await this.$cloudbase
                    .auth({persistence: "local"})
                    .anonymousAuthProvider()
                    .signIn();

                let student_id = localStorage.getItem('p_student_id')
                let student_information = await this.$cloudbase.database()
                    .collection('ykf_student')
                    .doc(student_id)
                    .get()
                student_information = student_information.data[0]
                // console.log(student_information)
                this.$store.dispatch('updateAdminFun',student_information.admin)
                await this.$cloudbase.getTempFileURL({
                    fileList: [student_information.Student_tx, 'cloud://user/tx']
                }).then((res) => {
                    // console.log(res)
                    this.$store.dispatch('updateTxFun', res.fileList[1].tempFileURL)
                })
            }

            // console.log(2)
            // console.log(localStorage.getItem('Authorization'))
        }
        ,
        methods: {
            logout() {
                localStorage.removeItem('Authorization')
                this.$store.dispatch('updateTxFun', '')
                this.$router.push('/entrance')
                this.$store.dispatch('updateAdminFun', false)
            },
            tz(name){
                this.$route.name!==name?this.$router.push({name:name}):''
            }
        },
        mounted(){

        }
    }

</script>

<style scoped>
    @import "../assets/css/header.css";

     .el-menu-demo{
        border-bottom: none !important;
        background-color: rgba(0,0,0,0)!important;
        transition: background-color .5s;
    }
    .el-menu-demo:hover{
        background-color: #545c64 !important;
    }
    .seo {
        background-color: #82f8ff;
        width: 100%;
        height: 20px;
        box-sizing: border-box;
        font-size: .16rem;
    }
    .seo nav {
        width: 11.9rem;
        height: .3rem;
        margin: 0 auto;
    }
    .seo nav ul li {
        /* width: 100px; */
        padding: 0 .15rem;
        height: .3rem;
        font-size: .16rem;
        float: left;
        line-height: .3rem;
        font-family: 黑体;
    }
</style>